<template>

  <div id="nongzuowu">

    <el-button type="text" @click="openFormVisible">添加作物</el-button>

    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
<!--      <el-table-column
        label="日期"
        width="120">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>-->
      <el-table-column
        prop="cropsId"
        label="作物编号"
        width="120">
      </el-table-column>
      <el-table-column
        prop="cropsName"
        label="作物名称"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态"
        show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-if="scope.row.status==0">种植中</span>
          <span v-if="scope.row.status==1">已出售</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="600">
        <template slot-scope="scope">
          <span v-if="scope.row.status==0">
            <el-button
              size="mini"
              @click="zhou(scope.row.id)">周期记录</el-button>
          <el-button
            size="mini"
            @click="zuo( scope.row)">作物详情</el-button>
          <el-button
            size="mini"
            @click="guo( scope.row.id)">过程详情</el-button>
          <el-button
            size="mini"
            @click="tong(scope.row)">通知运输</el-button>
          <el-button
            size="mini"
            @click="wuliuzhuizong(scope.$index, scope.row)">物流追踪</el-button>
          </span>
          <span v-if="scope.row.status==1">
          <el-button
            size="mini"
            @click="zuo(scope.$index, scope.row)">作物详情</el-button>
          <el-button
            size="mini"
            @click="guo(scope.row.id)">过程详情</el-button>
          <el-button
            size="mini"
            @click="wuliuzhuizong(scope.$index, scope.row)">物流追踪</el-button>
          </span>

        </template>
      </el-table-column>

    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="current"
      :page-sizes="sizes"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

    <el-dialog title="作物添加" :visible.sync="dialogFormVisiblea">
      <el-form :model="form">

        <el-form-item label="作物名称">
          <el-input v-model="form.name" placeholder="作物名称"></el-input>
        </el-form-item>

        <el-form-item label="作物类型">
          <el-select v-model="form.types" placeholder="作物类型">
            <el-option label="粮食作物" value="粮食作物"></el-option>
            <el-option label="经济作物" value="经济作物"></el-option>
            <el-option label="蔬菜作物" value="蔬菜作物"></el-option>
            <el-option label="果类" value="果类"></el-option>
            <el-option label="野生果类" value="野生果类"></el-option>
            <el-option label="饲养作物" value="饲养作物"></el-option>
            <el-option label="药用作物" value="药用作物"></el-option>
          </el-select>
        </el-form-item>
        <br>
        <el-form-item label="肥料名称">
          <el-input v-model="form.manure" placeholder="肥料名称"></el-input>
        </el-form-item>

        <el-form-item label="种植方式">
          <el-select v-model="form.ways" placeholder="作物类型">
            <el-option label="大棚种植" value="大棚种植"></el-option>
            <el-option label="露天种植" value="露天种植"></el-option>
          </el-select>
        </el-form-item>
        <br>
        <el-form-item label="种植年度">
          <el-input v-model="form.annual" placeholder="种植年度"></el-input>
        </el-form-item>

        <el-form-item label="是否套袋">
          <el-select v-model="form.bagging" placeholder="作物类型">
            <el-option label="套袋" value="套袋"></el-option>
            <el-option label="不套袋" value="不套袋"></el-option>
          </el-select>
        </el-form-item>
        <br>
        <el-form-item label="育苗周期">
          <el-input v-model="form.seedlings" placeholder="育苗周期"></el-input>
        </el-form-item>

        <el-form-item label="灌溉周期">
          <el-input v-model="form.irrigate" placeholder="灌溉周期"></el-input>
        </el-form-item>
        <br>
        <el-form-item label="施肥周期">
          <el-input v-model="form.fertilizer" placeholder="施肥周期"></el-input>
        </el-form-item>

        <el-form-item label="除草周期">
          <el-input v-model="form.weeding" placeholder="除草周期"></el-input>
        </el-form-item>
        <br>
        <el-form-item label="详细地址">
          <el-input v-model="form.address" placeholder="详细地址"></el-input>
        </el-form-item>
        <br>
        <el-form-item label="备注">
          <el-input v-model="form.decps" placeholder="备注"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addFormVisible">确 定</el-button>
      </div>
    </el-dialog>




    <el-dialog title="记录作物生长情况" :visible.sync="dialogFormVisible">
      <el-form :model="forms">
        <el-form-item label="温度" :label-width="formLabelWidth">
          <el-input v-model="forms.temperature" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="生长情况" :label-width="formLabelWidth">
          <el-input v-model="forms.growth" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="水分" :label-width="formLabelWidth">
          <el-input v-model="forms.moisture" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="光照情况" :label-width="formLabelWidth">
          <el-input v-model="forms.illumination" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="forms.decps" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="图片" :label-width="formLabelWidth">
        <el-upload
          class="avatar-uploader"
          action="http://localhost:2100/honghu/upPic"
          :show-file-list="false"
          :on-success="handleAvatarSuccess">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="logsFormVisible()">确 定</el-button>
      </div>
    </el-dialog>


<!--@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@-->


    <el-dialog title="过程详情" :visible.sync="dialogFormVisibles">

      <el-table
        ref="multipleTable"
        :data="tableDatas"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <!--      <el-table-column
                label="日期"
                width="120">
                <template slot-scope="scope">{{ scope.row.date }}</template>
              </el-table-column>-->
        <el-table-column
          prop="id"
          label="编号">
        </el-table-column>
        <el-table-column
          prop="temperature"
          label="温度"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="growth"
          label="生长情况"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="moisture"
          label="水分"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="illumination"
          label="光照"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="decps"
          label="备注"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="decps"
          label="备注"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="pic"
          label="图片"
          show-overflow-tooltip>
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="'http://localhost:2100'+scope.row.pic"></el-image>
          </template>

        </el-table-column>
      </el-table>


      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible">确 定</el-button>
      </div>
    </el-dialog>


<!--@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@-->


    <el-dialog title="作物详情" :visible.sync="dialogFormVisiblesa">

      <el-form :model="formas">
        <el-form-item label="作物名称" :label-width="formLabelWidth">
          <el-input v-model="formas.cropsName" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="农户" :label-width="formLabelWidth">
          <el-input v-model="formas.username" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="作物类型" :label-width="formLabelWidth">
          <el-input v-model="formas.types" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="肥料名称" :label-width="formLabelWidth">
          <el-input v-model="formas.manure" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="种植方式" :label-width="formLabelWidth">
          <el-input v-model="formas.ways" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="种植年度" :label-width="formLabelWidth">
          <el-input v-model="formas.annual" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="是否套袋" :label-width="formLabelWidth">
          <el-input v-model="formas.bagging" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="育苗周期" :label-width="formLabelWidth">
          <el-input v-model="formas.seedlings" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="灌溉周期" :label-width="formLabelWidth">
          <el-input v-model="formas.irrigate" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="施肥周期" :label-width="formLabelWidth">
          <el-input v-model="formas.fertilizer" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="除草周期" :label-width="formLabelWidth">
          <el-input v-model="formas.weeding" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="详情地址" :label-width="formLabelWidth">
          <el-input v-model="formas.address" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="formas.decps" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>

<!--    联系运输对话框-->
    <el-dialog title="联系运输" :visible.sync="controltrasp">
      <el-form :model="yunshu">

        <el-form-item label="选择司机" :label-width="formLabelWidth">
          <el-select v-model="yunshu.driverId" placeholder="请选择司机">
            <el-option label="陈亮司机" value="chenliang"></el-option>
            <el-option label="李红司机" value="lihong"></el-option>
            <el-option label="张良司机" value="zhangliang"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="原料厂商" :label-width="formLabelWidth">
          <el-select v-model="yunshu.farmerDept" placeholder="请选择厂商">
            <el-option label="白色原料厂商" value="白色原料厂商"></el-option>
            <el-option label="玉林原料厂商" value="玉林原料厂商"></el-option>
            <el-option label="南宁原料厂商" value="南宁原料厂商"></el-option>
            <el-option label="贵阳原料厂商" value="贵阳原料厂商"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="yunshu.remarks" autocomplete="off" style="width: 400px"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addyunshu">确 定</el-button>
      </div>
    </el-dialog>

    <!--轨迹弹出框-->
    <el-drawer size="80%" :visible.sync="playTrackView" :show-close="false" :with-header="false">
      <el-divider content-position="left">物流追踪</el-divider>
      <div id="app">
        <el-amap :zoom="13" :center="center">
          <el-amap-marker :position="center" />
        </el-amap>
      </div>
      <div id="container" class="map"></div>
    </el-drawer>
  </div>

</template>

<script>

export default {

  name: "index",
  data(){
    return{
      center: [116.397428, 39.90923],// 默认地图中心点坐标
      playTrackView: false,//控制地图
      yunshu:{},//通知运输对象
      controltrasp:false,//控制联系运输对话框
      form:{},
      dialogFormVisiblea:false,//添加作物
      dialogFormVisible:false,//作物周期
      dialogFormVisibles:false,//过程详情
      dialogFormVisiblesa:false,//作物详情
      token:"",
      tableData:[],
      multipleSelection:[],
      current:1,
      sizes:[5,10,15],
      size:5,
      total:0,
      formLabelWidth:"120px",
      forms:{},
      imageUrl:"",
      tableDatas:[],
      forma:{},
      formas:{},
    }
  },
  created(){
    this.token=sessionStorage.getItem("token");
    this.initData()
  },
  methods:{
    //物流追踪
    wuliuzhuizong(row){
      this.playTrackView = true;

    },
    //运输添加
    addyunshu(){
      this.axios.post("http://localhost:2100/honghu/addtransport",this.yunshu).then(res=>{
        if(res.data.code==200){
          this.$message.success("通知运输成功!");
          this.controltrasp=false;
          this.initData();
          this.yunshu={};
        }else{
          this.$message.error("失败");
        }
      })
    },
    //通知运输
    tong(row){
      console.log(row);
      this.controltrasp=true;
      this.yunshu.cropsId=row.cropsId;
    },
    addFormVisible(){
      this.form.token=this.token;
      this.axios.post("http://localhost:2100/honghu/add",this.form).then((response) => {
          this.initData();
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    initData(){
      this.axios.get("http://localhost:2100/honghu/list",{
        params:{
          current:this.current,
          size:this.size,
        }
      }).then((response) => {
           this.tableData = response.data.records;
           this.total = response.data.total;
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size=val;
      this.initData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.current=val;
      this.initData();
    },
    openFormVisible(){
       this.dialogFormVisiblea=true;
    },
    zhou(id){
      this.dialogFormVisible=true;
      this.forms.cropId = id;
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.forms.pic=res;
    },
    //添加作物详情
    logsFormVisible(){
      this.axios.post("http://localhost:2100/honghu/sava",this.forms).then((response) => {
        console.log(response.data);
        this.dialogFormVisible=false;
      })
    },
    guo(id){
      console.log(id)
      this.dialogFormVisibles=true;
      this.axios.get("http://localhost:2100/honghu/logsList",{
              params:{
                cropId:id,
              }
            }).then((response) => {
               this.tableDatas = response.data;
            })
    },
    zuo(row){
      this.dialogFormVisiblesa=true;
      console.log(row.cropsId)
      this.axios.get("http://localhost:2100/honghu/tracList",{
        params:{
          cropsId:row.cropsId,
        }
      }).then((response) => {
           this.forma = response.data.data;
           console.log(response.data.data[0]);
           // console.log(this.forma[0]);
           this.formas=this.forma[0];
      })
    }
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
